<!--
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2023-11-02 19:59:20
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-02-21 14:30:40
 * @FilePath: \giteeDownload\testthree\src\views\ball.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container" style="height:100vh;width:100vw;">

  </div>
</template>

<script setup>
import * as THREE from 'three'
// 创建场景
const scene = new THREE.Scene();
// 创建摄像机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建球体
const geometry = new THREE.SphereGeometry(5, 64, 64);
const texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// 移动摄像机
camera.position.z = 10;
// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  sphere.rotation.y += 0.001;
  renderer.render(scene, camera);
}
animate();

</script>
<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>